<!-- 日历 -->
<template>
  <div>
    <el-row type="flex" style="width: 70%;">

      <!-- 时间: 年/月 -->
      <div class="date">{{ time }}</div>
      <!-- 上/下月箭头 -->
      <el-row type="flex" justify="space-around" class="calendar">
        <img :src="require('@/assets/common/left.png')" alt="" @click="prevMonth">
        <img :src="require('@/assets/common/right.png')" alt="" @click="nextMonth">
      </el-row>
    </el-row>
    <!-- 日期组件 -->
    <el-calendar v-model="currentDate">
      <template #dateCell="{ date }">
        <span class="cell">{{ date.getDate() }}</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      currentDate: new Date(), // 当前日期
      time: null // 渲染的日期
    }
  },
  mounted() {
    this.updateTime() // 挂载更新
  },
  methods: {
    // 点击下一个月
    nextMonth() {
      this.currentDate = dayjs(this.currentDate).add(1, 'month').toDate()
      this.updateTime() // 更新渲染的日期
    },
    // 点击上一个月
    prevMonth() {
      this.currentDate = dayjs(this.currentDate).subtract(1, 'month').toDate()
      this.updateTime()
    },
    // 渲染的日期
    updateTime() {
      this.time = dayjs(this.currentDate).format('YYYY年MM月')
    }
  }

}
</script>

<style lang="scss" scoped>
.date{
    flex: 1;

}
.calendar {
    img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
}
</style>
